<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
  {
    style: {
      navigationBarTitleText: '搜索',
      "enablePullDownRefresh": false,
    },
  }
  </route>
<template>
  <view class="pb-4">
    <view class="search-wrap">
      <view class="flex items-center pr-4">
        <view class="flex-1">
          <wd-search v-model="state.name" placeholder-left :hide-cancel="true" placeholder="请输入关键字"
            :focusWhenClear="true" custom-class="search" @search="handleSearch" />
        </view>
        <wd-button :round="false" size="small" @click="handleSearch">搜索</wd-button>
      </view>
    </view>

    <view class="m-4">
      <k-list :is-empty="!courseList.length" :loading="loading">
        <around :data="item" v-for="item in courseList" :key="item.id"
          @click="to(`pages-sub/product/product-detail?id=${item.id}`)">
          <view class="mt-auto">
            <discount-bar :price="item.lineation_price" :levelName="item.levelName" />
          </view>
        </around>
      </k-list>
    </view>
  </view>
</template>

<script setup>
import { to } from "@/utils/navigation";
import { fetchCourseCategor, fetchCourseList } from "@/service/course";
import useReachBottomLoadMore from "@/hooks/useReachBottomLoadMore";

const state = ref({
  name: ""
});
const { refresh, run, data: courseList, loading } = useReachBottomLoadMore(fetchCourseList, state);


onLoad((options) => {
  state.value.name = options.keyword;
  refresh(state.value);
})
function handleSearch() {
  refresh(state.value);
}
</script>

<style lang="scss" scoped>
.search-wrap {
  @apply sticky top-0 z-100 bg-white pb-[20rpx];
  box-shadow: 0rpx 3rpx 10rpx 1rpx rgba(0, 0, 0, 0.1);
}
</style>
